<template>
    <div>
        <div ref="maps" style="height:800px;height:710px"></div>
    </div>
</template>

<script>
    import Echarts from "echarts";
    import Axios from "axios";
    import bus from '@/eventBus/bus'

    export default {
        props: ['pinyinName'],
        data() {
            return {
                chart: null,
                option: {
                    title: {
                        text: "全国地图"
                    },
                    series: [
                        {
                            type: "map",
                            mapType: "china",
                            selectedMode: "single",
                            label: {
                                emphasis: {
                                    show: true,
                                    color: '#fff'
                                }
                            },
                            roam: true,
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    areaColor: '#0A0917',
                                    borderColor: '#3F5D98'
                                },
                                emphasis: {
                                    areaColor: '#2a333d'
                                }
                            }
                        },
                    ],

                }
            };
        },
        async mounted() {
            this.chart = Echarts.init(this.$refs.maps);
            let pinyinName = this.pinyinName.provinces
            this.option.title.text = this.pinyinName.name
            // let mapJson = await Axios.get(`https://raw.githubusercontent.com/huanent/vue-echarts-map-demo/master/map/province/${pinyinName}.json`);
            let mapJson = await Axios.get(`./static/map/province/${pinyinName}.json`);
            Echarts.registerMap(pinyinName, mapJson.data);
            this.option.series[0].mapType = pinyinName;
            this.chart.on('click', function (params) {
                let obj = {
                    name: '全国'
                }
                bus.$emit('provinces', obj)
            })
            this.chart.setOption(this.option);
        },
    };
</script>


